<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简途旅行</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/old/css/represent/choices.scss?__inline">
</head>
<body>
<div class="progress">
    <div class="progress-content">
        <img src=""/>
        <div class="progressBar">
            <div class="bar"><span class="bus"></span></div>
        </div>
    </div>
</div>
<div class="main">
    <div class="bgLayer">
        <img src="/old/images/represent/choice_bg@2x.png" alt="背景图"/>
    </div>
    <div class="fixedLayer">
        <div class="section first">
            <div class="left">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;九寨沟&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/jzg.png" class="九寨沟"/>
                    <span>哦~神奇的天堂~</span>
                </div>
                <div class="support" data-weight="8">支&nbsp;&nbsp;持</div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;稻城亚丁&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/dcyd.png" class="稻城亚丁"/>
                    <span>人烟之外、仙境之里</span>
                </div>
                <div class="support" data-weight="2">支&nbsp;&nbsp;持</div>
            </div>
        </div>
        <div class="section second">
            <div class="left">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;太古里&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/tgl.png" class="太古里"/>
                    <span>“高白瘦富美"聚集地</span>
                </div>
                <div class="support" data-weight="8">支&nbsp;&nbsp;持</div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;大英死海&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/dysh.png" class="大英死海"/>
                    <span>不穿衣服的美女这儿看噻</span>
                </div>
                <div class="support" data-weight="2">支&nbsp;&nbsp;持</div>
            </div>
        </div>
        <div class="section third">
            <div class="left">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;金丝猴&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/jsh.png" class="金丝猴"/>
                    <span>猴哥我要给你生猴子</span>
                </div>
                <div class="support" data-weight="1">支&nbsp;&nbsp;持</div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;大熊猫&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/dxm.png" class="大熊猫"/>
                    <span>伦家才是国民宝宝</span>
                </div>
                <div class="support" data-weight="9">支&nbsp;&nbsp;持</div>
            </div>
        </div>
        <div class="section fourth">
            <div class="left">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;都江堰&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/djy.png" class="都江堰"/>
                    <span>“天府之国”的“守护神”</span>
                </div>
                <div class="support" data-weight="5">支&nbsp;&nbsp;持</div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;乐山大佛&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/lsdf.png" class="乐山大佛"/>
                    <span>镇佑四川，天下太平</span>
                </div>
                <div class="support" data-weight="5">支&nbsp;&nbsp;持</div>
            </div>
        </div>
        <div class="section fifth">
            <div class="left">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;碧峰峡&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/bfx.png" class="碧峰峡"/>
                    <span>熊猫都在这避暑，安逸！</span>
                </div>
                <div class="support" data-weight="4">支&nbsp;&nbsp;持</div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="cover">
                        -&nbsp;&nbsp;青城山&nbsp;&nbsp;-
                    </div>
                    <img src="/old/images/represent/qcs.png" class="青城山"/>
                    <span>空调都是摆设的榻榻</span>
                </div>
                <div class="support" data-weight="6">支&nbsp;&nbsp;持</div>
            </div>
        </div>
        <div class="footer">
            <form autocomplete="off" action="/" method="POST">
                <input name="weight" type="hidden" value="0"/>
               <a class="submit">看看我的川范指数</a>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="/old/common/js/zepto.min.js"></script>
<script type="text/javascript" src="/old/common/common/js/base.js"></script>
<script type="text/javascript" src="/old/common/js/imgLoader.js"></script>
<script>
        var loader = new imgLoader({
            backgroundResources:[
                "/images/represent/choice_bg@2x.png",
                "/images/represent/jzg.png",
                "/images/represent/dcyd.png",
                "/images/represent/tgl.png",
                "/images/represent/dysh.png",
            ],
            onStart : function(total){
            },
            onProgress : function(current,total){
                var percent = current/total;
                $('.bar').width(11.4*percent+'rem');
                if(percent==0.25 || percent==1){
                    $('.bar .bus').css('right','0');
                }
            },
            onComplete: function() {
//                $('.bar .bus').css('right','0');
                setTimeout(function() {
                    $('.progress').addClass('fadeOut');
                },500);
                setTimeout(function() {
                    $('.progress').remove();
                },800);
            }
        });
        loader.start();
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 针对uc横竖屏rem html没有重绘的问题
                    var style;
                    if (style = document.getElementById("forhtml")) {
                        style.parentNode.removeChild(style);
                    }
                    style = document.createElement("style");
                    style.id = "forhtml";
                    document.head.appendChild(style);
                    style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
                };
        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
        var obj = {a:[30,28,26],b:[36,34],c:[24,22],d:[20],e: [16.14]};
    $('.support').on('click',function(e){
        $(this).parents('.section').find('.support').removeClass('selected');
        $(this).addClass('selected');
    });
    $('.submit').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        var $supports = $('.support.selected');
        if($supports.length==5){
            var weight = 0,grade;
            $supports.each(function(index,ele){
                weight += parseInt($(ele).attr('data-weight'));
            });
            for(var key in obj){
                $.each(obj[key],function(i,value){
                    if(value==weight){
                        grade = key;
                       return;
                    }
                });
            }
//            $('input[name=weight]').val(weight);
            $('input[name=weight]').val(grade);
            alert(weight);
//            $('.footer form').submit();
        }else{
            $.alert({
                msg: '还有选择题没回答'
            });
        }
    });
</script>
</body>
</html>
